<script setup>
import LimitFram from "./LimitFrame.vue";
import { deepClone } from "@/utils";

const props = defineProps({
  limit: {
    type: Object,
    required: true,
  },
});

const emits = defineEmits([ "cancel", "update:limit" ]);

const limitModel = computed({
  get() {
    return props.limit;
  },
  set(newValue) {
    emits("update:limit", newValue)
  }
})

const cascaderProps = {
  multiple: true,
}

const ruleData = ref({
  0: "userInsAllNo",
  1: "userInsAny",
  2: "userInsAll",
});

const formRef = ref();
const form = ref({ exit: 1, insId: [], insName: [] });
const rules = {
  insId: [ { required: true, message: "请选择机构", trigger: "change" } ],
};
const blackUserInsVisible = ref(false);
const insCascaderRef = ref();

// 描述
const ruleText = computed(() => {
  let rule = limitModel.value.value;
  console.log("rule Text", rule)
  if (!rule.insId) {
    return ""
  }

  return `${
    rule.exit == 1 ? "任意匹配" : rule.exit == 2 ? "全匹配" : "不匹配"
  } “${String(rule.insName)}”`;
});

const handleInsChange = () => {
  // console.log("checkedNodes", checkedNodes)
  const selecedData = insCascaderRef.value.getSelected()
  form.value.insName = selecedData.map(item => item.name)
  form.value.insId = selecedData.map(item => item.id)
}

const getBlackKeys = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      limitModel.value.value = deepClone(form.value);
      formatLimit();
      console.log("limit", limitModel.value)
      blackUserInsVisible.value = false;
    }
  });
};

// 生成表达式
const formatLimit = () => {
  // 表达式最终的样子
  // $_user_ins.userInsAll$$_1_2_3 == true

  limitModel.value.keys = [
    {
      businessType: "user_ins",
      key: `${ruleData.value[form.value.exit]}$$_${form.value.insId.join("__")}`,
      obj: form.value.insId
    },
  ];
  limitModel.value.expression = `$_user_ins.${ruleData.value[form.value.exit]}$$_${form.value.insId.join("__")}==true`;
};

const addRule = () => {
  if (formRef.value) formRef.value.resetFields();
  blackUserInsVisible.value = true;
};

const editRule = () => {
  form.value = deepClone(limitModel.value.value);
  blackUserInsVisible.value = true;
};

const onClose = () => {
  emits("cancel");
};

onMounted(() => {
});

defineExpose({ add: addRule });
</script>
<template>
  <LimitFram
    title="机构限制"
    :content="ruleText"
    @edit="editRule"
  />
  <Dialog
    v-model="blackUserInsVisible"
    title="机构限制"
    :width="500"
    @confirm="getBlackKeys"
    @close="onClose"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item
        label="类型"
        prop="exit"
      >
        <el-radio-group v-model="form.exit">
          <el-radio :label="1">
            任意匹配
          </el-radio>
          <el-radio :label="0">
            不匹配
          </el-radio>
          <el-radio :label="2">
            全匹配
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <ins-cascader-filter
        ref="insCascaderRef"
        :selected="form.insId"
        :clearable="true"
        :cascader-props="cascaderProps"
        @change="handleInsChange"
      />
    </el-form>
  </Dialog>
</template>

<style lang="scss" scoped>
</style>
